<template>
  <div>
    <van-button
      type="default"
      @click="addShow = true"
      style="background: rgba(0, 0, 0, 0)"
      >添加学校</van-button
    >
    <table>
      <tr>
        <td>创建时间</td>
        <td>学校名称</td>
        <td>操作</td>
      </tr>
      <tr v-for="(item, index) in schools_list" :key="index">
        <td>{{ datetime(item.create_date) }}</td>
        <td>{{ item.name }}</td>
        <td>
          <van-button
            type="default"
            @click="(nameShow = true), (id = item.id)"
            style="background: rgba(0, 0, 0, 0)"
            >修改</van-button
          >
          <van-button
            type="default"
            @click="del_school(item.id)"
            style="background: rgba(0, 0, 0, 0)"
            >删除</van-button
          >
        </td>
      </tr>
    </table>
  </div>

  <van-dialog
    title="添加学校"
    v-model:show="addShow"
    :show-confirm-button="false"
    close-on-click-overlay
  >
    <van-form @submit="add_school">
      <van-field placeholder="名称" v-model="add_name" maxlength="20" />
      <van-button
        round
        block
        color="linear-gradient(to right, #ff8360, #ee0a24)"
        native-type="submit"
        class="dialog_button"
      >
        提交
      </van-button>
    </van-form>
  </van-dialog>

  <van-dialog
    title="修改学校名称"
    v-model:show="nameShow"
    :show-confirm-button="false"
    close-on-click-overlay
  >
    <van-form @submit="upd_school">
      <van-field placeholder="名称" v-model="upd_name" maxlength="20" />
      <van-button
        round  
        block
        color="linear-gradient(to right, #ff8360, #ee0a24)"
        native-type="submit"
        class="dialog_button"
      >
        提交
      </van-button>
    </van-form>
  </van-dialog>
</template>

<script>
import { datetime } from "../utils/utils";
export default {
  data() {
    return {
      datetime,
      schools_list: "",
      nameShow: false,
      add_name: "",
      upd_name: "",
      addShow: false,
      id: "",
    };
  },
  mounted() {
    this.schools_show();
  },
  methods: {
    schools_show: function () {
      this.myaxios(this.host + "user/schools/", "get").then((data) => {
        console.log(data);
        if (data.code == 200) {
          this.$toast.success(data.msg);
          this.schools_list = data.data;
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    add_school: function () {
      this.myaxios(this.host + "user/schools/", "post", {
        name: this.add_name,
      }).then((data) => {
        if (data.code == 200) {
          this.$toast.success(data.msg);
          this.schools_show();
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    upd_school: function () {
      this.myaxios(this.host + "user/school/" + this.id + "/", "put", {
        name: this.upd_name,
      }).then((data) => {
        if (data.code == 200) {
          this.$toast.success(data.msg);
          this.schools_show();
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    del_school: function (id) {
      this.myaxios(this.host + "user/school/" + id + "/", "delete").then((data) => {
        if (data.code == 200) {
          this.$toast.success(data.msg);
          this.schools_show();
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
  },
};
</script>

<style>
</style>